<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script>
        document.write('<meta name="viewport" content="width=device-width, initial-scale='+(1/window.devicePixelRatio)+', maximum-scale='+(1/window.devicePixelRatio)+', user-scalable='+(1/window.devicePixelRatio)+'">');
     </script>
    <title>Document</title>
    <link rel="stylesheet" href="fonts/iconfont.css">
    <style>
        body,ul,li{
            margin: 0; padding: 0;
        }
        li{
            list-style: none;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        #wrapper{
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .header,.nav{
            height: 96px;
            flex-shrink: 0;
            width: 100%;
        }
        .section{
            flex-grow: 1;
            height: 48px;
            overflow-y:auto;
        }
        .nav .bnav{
            display: flex;
            height: 100%;
            align-items: center;
        }
        .bnav li{
            flex-basis: 100%;
            height: 100%;
            line-height: 48px;
            font-size: 48px;
            background: #ccc;
            position: relative;
            text-align: center;
        }
        .bnav li::before{
            width: 100%;
            height: 48px;
            line-height: 48px;
            font-size: 48px;
        }
        .bnav li:nth-of-type(1)::before{
            content:'\e603';
        }
        .bnav li:nth-of-type(2)::before{
            content:'\e61a';
        }
        .bnav li:nth-of-type(3)::before{
            content:'\e649';
        }
        .bnav li:nth-of-type(4)::before{
            content:'\e844';
        }
        .bnav li:nth-of-type(5)::before{
            content:'\e622';
        }
        .box{
            width: 100%;
            height: 100%;
            display: flex;
            font-size: 48px;
            line-height: 96px;
        }
        .box .before,.box .yonghu,.box .shou{
            width: 80px;
            height: 96px;
            text-align: center;
            line-height: 96px;
            flex-shrink: 1;
        }
        .before::after{
            content: '\f007a';
            font-size: 48px;
            border-radius: 50%;
            border: 1px solid #ccc;
        }
        .yonghu::after{
            content: '\e610';
            font-size: 48px;
            border-radius: 50%;
            border: 1px solid #ccc;
        }
        .shou::after{
            content: '\f0015';
            font-size: 48px;
            border-radius: 50%;
            border: 1px solid #ccc;
        }
        .box .hcon{
            flex-basis: 200px;
            flex-grow: 1;
            flex-shrink: 1;
            text-align: center;
            background: #ccc;
        }
        #secon{
			display:flex;
            flex-direction: row ;
            justify-content: space-around;
            align-content:center;
            flex-wrap: wrap;
            
		}
		#secon li{
            width: 300px;
            height:300px;
            font-size: 50px;
            line-height: 300px;
            text-align: center;
            box-shadow: 0 0 30px rgba(0,0,0,.8) inset;
            position: relative;
            background: #fff;
            margin-top: 20px;
/*            flex-grow: 1;*/
		}
      #secon li:after{
           background: #fff;
          display: block;
          content: '';
          position: absolute;
          z-index: -1;
          bottom:0px;
          margin: 0 auto;
          width: 100%;
          height: 50px;
          border-radius: 50%;
          box-shadow: 0 10px 10px rgba(0,0,0,.8);
      }
    </style>
</head>
<body>
    <div id='wrapper'>
        <header class="header">
            <div class="box">
                <div class="before iconfont"></div>
                <div class="hcon">欢迎光临美团</div>
                <div class="iconfont yonghu"></div>
                <div class="iconfont shou"></div>
            </div>
        </header>
        <section class="section">
            <ul id='secon'>
                <li>项目1</li>
                <li>项目2</li>
                <li>项目3</li>
                <li>项目4</li>
                <li>项目5</li>
                <li>项目6</li>
                <li>项目7</li>
                <li>项目8</li>
                <li>项目9</li>
                <li>项目10</li>
            </ul>
        </section>
        <nav class="nav">
            <ul class="bnav">
                <li class='iconfont'><br>分类</li>
                <li class='iconfont'><br>购物车</li>
                <li class='iconfont'><br>消息</li>
                <li class='iconfont'><br>提醒</li>
                <li class='iconfont'><br>订单</li>
            </ul>
        </nav>
    </div>
</body>
</html>